<template>
  <view class="region-item">
    <text class="region-label">{{ label }}:</text>
    <view class="region-inputs">
      <!-- 起点坐标 -->
      <view class="coord-input">
        <text class="coord-title">起点:</text>
        <view class="coord-group">
          <!-- X坐标 -->
          <view class="coord-pair">
            <text class="coord-label">X:</text>
            <uni-number-box 
              :value="localRegion[0][0]" 
              :min="limits.minX" 
              :max="limits.maxX"
              :step="1"
              @change="updateCoord(0, 0, $event)" 
            />
          </view>
          <!-- Y坐标 -->
          <view class="coord-pair">
            <text class="coord-label">Y:</text>
            <uni-number-box 
              :value="localRegion[0][1]" 
              :min="limits.minY" 
              :max="limits.maxY"
              :step="1"
              @change="updateCoord(0, 1, $event)" 
            />
          </view>
        </view>
      </view>
      
      <!-- 终点坐标 -->
      <view class="coord-input">
        <text class="coord-title">终点:</text>
        <view class="coord-group">
          <!-- X坐标 -->
          <view class="coord-pair">
            <text class="coord-label">X:</text>
            <uni-number-box 
              :value="localRegion[1][0]" 
              :min="limits.minX" 
              :max="limits.maxX"
              :step="1"
              @change="updateCoord(1, 0, $event)" 
            />
          </view>
          <!-- Y坐标 -->
          <view class="coord-pair">
            <text class="coord-label">Y:</text>
            <uni-number-box 
              :value="localRegion[1][1]" 
              :min="limits.minY" 
              :max="limits.maxY"
              :step="1"
              @change="updateCoord(1, 1, $event)" 
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RegionSelector',
  props: {
    label: {
      type: String,
      required: true
    },
    region: {
      type: Array,
      required: true,
      validator: function(value) {
        return value.length === 2 && 
               value[0].length === 2 && 
               value[1].length === 2
      }
    },
    limits: {
      type: Object,
      default: () => ({
        minX: 0,
        maxX: 1000,
        minY: 0,
        maxY: 1000
      })
    }
  },
  data() {
    return {
      localRegion: [[0, 0], [0, 0]]
    }
  },
  watch: {
    region: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal && newVal.length === 2) {
          this.localRegion = [
            [parseInt(newVal[0][0]), parseInt(newVal[0][1])],
            [parseInt(newVal[1][0]), parseInt(newVal[1][1])]
          ]
        }
      }
    }
  },
  methods: {
    updateCoord(i, j, value) {
      value = parseInt(value)
      
      // 创建新的区域数据
      const newRegion = [
        [...this.localRegion[0]],
        [...this.localRegion[1]]
      ]
      
      // 更新指定坐标
      newRegion[i][j] = value
      
      // 确保终点坐标大于起点坐标
      if (i === 0) { // 更新起点
        if (j === 0 && value >= newRegion[1][0]) {
          newRegion[1][0] = value + 1
        } else if (j === 1 && value >= newRegion[1][1]) {
          newRegion[1][1] = value + 1
        }
      } else { // 更新终点
        if (j === 0 && value <= newRegion[0][0]) {
          newRegion[0][0] = value - 1
        } else if (j === 1 && value <= newRegion[0][1]) {
          newRegion[0][1] = value - 1
        }
      }
      
      // 更新本地数据
      this.localRegion = newRegion
      
      // 发送更新后的数据
      this.$emit('update:region', newRegion)
    }
  }
}
</script>

<style lang="scss">
.region-item {
  margin: 15px 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  
  .region-label {
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
    color: #333;
  }
  
  .region-inputs {
    .coord-input {
      margin: 10px 0;
      
      .coord-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        display: block;
      }
      
      .coord-group {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        
        .coord-pair {
          display: flex;
          align-items: center;
          
          .coord-label {
            width: 25px;
            margin-right: 5px;
            color: #666;
            font-size: 14px;
          }
          
          .uni-number-box {
            width: 120px;
          }
        }
      }
    }
  }
}
</style> 